// var data = import('./json')
var tab = document.getElementById('tab')
var tablist = [{
    id:0,
    name:"综合",
    content:[{
        id:0,
        name:"平遥",
        price:"500"
    },{
        id:1,
        name:"五台山",
        price:"100"
    },{
        id:2,
        name:"西安",
        price:"100"
    },{
        id:3,
        name:"壶口",
        price:"100"
    }]
},{
    id:1,
    name:"销量",
    content:[{
        id:0,
        name:"六棱山",
        price:"500"
    },{
        id:1,
        name:"太原",
        price:"100"
    },{
        id:2,
        name:"大同",
        price:"100"
    },{
        id:3,
        name:"大槐树",
        price:"100"
    }]
},{
    id:2,
    name:"满意度",
    content:[{
        id:0,
        name:"云冈石窟",
        price:"500"
    },{
        id:1,
        name:"九龙壁",
        price:"100"
    },{
        id:2,
        name:"华严寺",
        price:"100"
    },{
        id:3,
        name:"白马寺",
        price:"100"
    }]
},{
    id:3,
    name:"价格",
    content:[{
        id:0,
        name:"sssss",
        price:"500"
    },{
        id:1,
        name:"sdas",
        price:"100"
    },{
        id:2,
        name:"wqwqq",
        price:"100"
    },{
        id:3,
        name:"xddddff",
        price:"100"
    }]
}]
tablist.forEach(item=>{
    return tab.innerHTML += `
        <li><a href="#">${item.name}<span>+</span></a></li>
    `
})

var tabli = tab.getElementsByTagName('a')
var main = document.getElementById('main')


tabli[0].className = 'active'
tablist[0].content.forEach(item=>{
    return main.innerHTML += `
        <dl>
            <dt>${item.name}</dt>
            <dd>${item.price}</dd>
        </dl>
    `
})

for(let i=0;i<tabli.length;i++){
    tabli[i].onclick =function(){
        for(var j=0;j<tabli.length;j++){
            tabli[j].className = ''
        }
        tabli[i].className = 'active'
        main.innerHTML = ''
        tablist[i].content.forEach(item=>{
            return main.innerHTML += `
                <dl>
                    <dt>${item.name}</dt>
                    <dd>${item.price}</dd>
                </dl>
            `
        })

    } 
}

